<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: gold;
            display: none;
        }
    </style>
    <script src="../../libs/jquery3_1_1.min.js"></script>
    <script>
        $(function () {
            $('button').eq(0).click(function () {
                $('div').show('slow');
            });

            $('button:eq(1)').click(function () {
                $('div').hide('slow');
            });

            $('button').eq(2).click(function () {
//                $('div').slideToggle();
                $('div').toggle();
            });

            $('button').eq(3).click(function () {
                $('div').slideDown('slow');
            });

            $('button').eq(4).click(function () {
                $('div').slideUp('slow');
            });

            $('button').eq(5).click(function () {
                $('div').slideToggle('slow');
            });

            $('button').eq(6).click(function () {
                $('div').fadeIn('slow');
            });

            $('button').eq(7).click(function () {
                $('div').fadeOut('slow');
            });

            $('button').eq(8).click(function () {
                $('div').fadeToggle('slow');
            });
        });
    </script>
</head>
<body>
<button>快速显示</button>
<button>快速隐藏</button>
<button>Toggle</button>
<button>下拉显示</button>
<button>上拉隐藏</button>
<button>Toggle</button>
<button>淡入</button>
<button>淡出</button>
<button>Toggle</button>
<div></div>
</body>
</html>